// 从Redux Toolkit中导入createSlice函数
import { createSlice } from '@reduxjs/toolkit'

// 创建一个counter slice（包含reducer和actions）
export const counterSlice = createSlice({
  name: 'counter',  // slice的名称，用于生成action type的前缀
  initialState: {   // 初始状态
    value: 0        // 计数器初始值为0
  },
  reducers: {       // 定义reducer函数集合
    // 增加计数器值
    increment: state => {
      // Redux Toolkit使用了Immer库，允许我们直接"修改"state
      // 实际上Immer会跟踪这些变更并生成全新的不可变状态
      state.value += 1
    },
    // 减少计数器值
    decrement: state => {
      state.value -= 1
    },
    // 按指定数量增加计数器值
    incrementByAmount: (state, action) => {
      // action.payload包含dispatch时传入的参数
      state.value += action.payload
    }
  }
})

// 自动生成的action creators
// 对应每个reducer函数，执行时会返回相应的action对象
// 例如：increment() 返回 { type: 'counter/increment' }
export const { increment, decrement, incrementByAmount } = counterSlice.actions

// 导出reducer函数，用于配置store
export default counterSlice.reducer